<template>
  <el-form ref="ruleFormRef" :model="commonForm" :rules="rules" class="demo-ruleForm" label-position="left" size="small">
    <el-form-item :label="t('strip.optionLayer')" prop="optionLayer" :placeholder="t('strip.optionLayer')">
      <el-input-number v-model="commonForm.optionLayer" :min="1" :max="999" />
    </el-form-item>

    <el-form-item :label="t('strip.optionType')" prop="optionType" :placeholder="t('strip.optionType')">
      <el-select v-model="commonForm.optionType" class="m-2" placeholder="Select" size="small">
        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item :label="t('strip.start')" prop="body[0].start" :placeholder="t('strip.start')">
      <el-input-number v-model="commonForm.body[0].start" :min="0" :max="999" />
    </el-form-item>

    <el-form-item :label="t('strip.end')" prop="body[0].end" :placeholder="t('strip.end')">
      <el-input-number v-model="commonForm.body[0].end" :min="0" :max="999" />
    </el-form-item>

    <el-form-item :label="t('strip.r')" prop="body[0].r" :placeholder="t('strip.r')">
      <el-select v-model="commonForm.body[0].r" class="m-2" placeholder="Select" size="small">
        <el-option v-for="item in RgbOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item :label="t('strip.g')" prop="body[0].g" :placeholder="t('strip.g')">
      <el-select v-model="commonForm.body[0].g" class="m-2" placeholder="Select" size="small">
        <el-option v-for="item in RgbOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item :label="t('strip.b')" prop="body[0].b" :placeholder="t('strip.b')">
      <el-select v-model="commonForm.body[0].b" class="m-2" placeholder="Select" size="small">
        <el-option v-for="item in RgbOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="!stripClientStatus" :loading="loading">
        {{ t('strip.send') }}
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">
        {{ t('strip.reset') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { sendMessageByClient } from '@/api/strip'
import { stripStore } from '@/store/stripStore'
import { storeToRefs } from 'pinia'
import { StripMessage } from '@/types/strip/stripMessage'

const store = stripStore()
const loading = ref(false)

const { stripClientStatus } = storeToRefs(store) // 连接状态
const { t } = useI18n()
const ruleFormRef = ref<FormInstance>()

const props = defineProps({
  ip: {
    type: String,
    required: false,
    default: '127.0.0.1'
  },
  port: {
    type: Number,
    required: false,
    default: 2000
  }
})

const commonForm: StripMessage = reactive({
  optionLayer: 0,
  optionType: '',
  body: [{
    start: 0,
    end: 0,
    r: '',
    g: '',
    b: ''
  }]
})

const typeOptions = [
  {
    value: '1',
    label: '开启',
  },
  {
    value: '3',
    label: '关闭',
  },
  {
    value: '5',
    label: '普通测试',
  },
  {
    value: '7',
    label: '终极测试',
  }
]

const RgbOptions = [
  {
    value: '0',
    label: '0',
  },
  {
    value: '1',
    label: '1',
  },
  {
    value: '2',
    label: '2',
  },
  {
    value: '3',
    label: '3',
  },
  {
    value: '4',
    label: '4',
  },
  {
    value: '5',
    label: '5',
  },
  {
    value: '6',
    label: '6',
  },
  {
    value: '7',
    label: '7',
  },
  {
    value: '8',
    label: '8',
  },
  {
    value: '9',
    label: '9',
  },
  {
    value: 'A',
    label: 'A',
  },
  {
    value: 'B',
    label: 'B',
  },
  {
    value: 'C',
    label: 'C',
  },
  {
    value: 'D',
    label: 'D',
  },
  {
    value: 'E',
    label: 'E',
  },
  {
    value: 'F',
    label: 'F',
  }
]

const rules = reactive<FormRules>({
  optionLayer: [
    {
      required: true,
      message: '请填写载体编号',
      trigger: 'blur'
    }
  ],
  optionType: [
    {
      required: true,
      message: '请选择操作类型',
      trigger: 'blur'
    }
  ],
  'body[0].start': [
    {
      required: true,
      message: '请填写起始点',
      trigger: 'blur'
    }
  ],
  'body[0].end': [
    {
      required: true,
      message: '请填写终止点',
      trigger: 'blur'
    }
  ],
  'body[0].R': [
    {
      required: true,
      message: '请填写RGB中的R',
      trigger: 'blur'
    }
  ],
  'body[0].G': [
    {
      required: true,
      message: '请填写RGB中的G',
      trigger: 'blur'
    }
  ],
  'body[0].B': [
    {
      required: true,
      message: '请填写RGB中的B',
      trigger: 'blur'
    }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      sendMessageByClient(commonForm).then(res => {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'success',
          duration: 1000
        })
      }).finally(() => {
        loading.value = false
      })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
